const n = `
<template>
  <s-flex direction="column" gap="1em" :style="{ width: '100%' }">
    <s-row gap="1em">
      <s-column span="1">
        <div class="grid-cell">1</div>
      </s-column>
      <s-column span="2">
        <div class="grid-cell">2</div>
      </s-column>
      <s-column span="3">
        <div class="grid-cell">3</div>
      </s-column>
      <s-column span="3">
        <div class="grid-cell">3</div>
      </s-column>
      <s-column span="2">
        <div class="grid-cell">2</div>
      </s-column>
      <s-column span="1">
        <div class="grid-cell">1</div>
      </s-column>
    </s-row>
    <s-row gap="1em">
      <s-column span="1" offset="1">
        <div class="grid-cell">1</div>
      </s-column>
      <s-column span="2" offset="2">
        <div class="grid-cell">2</div>
      </s-column>
      <s-column span="3" offset="3">
        <div class="grid-cell">3</div>
      </s-column>
      <s-column span="4" offset="4">
        <div class="grid-cell">4</div>
      </s-column>
      <s-column span="5" offset="5">
        <div class="grid-cell">5</div>
      </s-column>
      <s-column span="6" offset="6">
        <div class="grid-cell">6</div>
      </s-column>
      <s-column span="7" offset="7">
        <div class="grid-cell">7</div>
      </s-column>
      <s-column span="13" offset="13">
        <div class="grid-cell">13</div>
      </s-column>
    </s-row>
  </s-flex>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class ButtonDemo extends Vue {}
<\/script>

<style lang="scss" scoped>
.s-row {
  border-radius: var(--s-border-radius-l);
  background-color: var(--s-button-plain-bg-normal);
}

.grid-cell {
  width: 100%;
  padding: 1em;
  color: var(--s-primary-normal);
  text-align: center;
  border-radius: var(--s-border-radius-l);
  background-color: var(--s-primary-focus);
}
</style>
`; export { n as default };
